<template>
  <section class="problem">
    <ul>
      <li id="item" v-for="item of problemItem" :key="item.id" @click="handle(item.id)">
        <p class="son" :class="{name: show1, collapseOne: show2}">{{item.id + 1}}.{{item.name}}</p>
        <fade-problem>
          <div id="box" class="box" v-show="item.showContent">
            <p>1.{{item.title}}</p>
            <p>2.{{item.introduce}}</p>
          </div>
        </fade-problem>
      </li>
    </ul>
  </section>
</template>

<script>
import { mapState } from 'vuex'
import FadeProblem from '../../../common/Fade-About'
export default {
  name: 'Problem',
  components: {
    FadeProblem
  },
  data () {
    return {
      problemItemData: {},
      show1: true,
      show2: false
    }
  },
  computed: {
    ...mapState(['problemItem'])
  },
  methods: {
    handle (id) {
      this.problemItemData = this.problemItem
      console.log(this.problemItemData)
      this.problemItemData[id].showContent = !this.problemItemData[id].showContent
    }
  }
}
</script>

<style lang="stylus" scoped>
  .problem
    position relative
    width 100%
    height 100vh
    background #fff
    ul
      li
        padding 35px
        border-bottom 1px solid #ecebeb
        .son
          font-size 28px
          color #7d7d7d
        .box
          margin-top 30px
          padding 30px 20px
          background #ecebeb
          transition .3s // 过渡时间
          p
            font-size 25px!important
            color #7d7d7d
            line-height 1.2
          p:first-child
            margin-bottom 15px
        .name:before
          content '折叠'
          color #7d7d7d
          float right
          margin-right 35px
        .collapseOne:before
          content "展开"
          font-size 25px
          color #eb5772
          float right
          margin-right 35px
</style>
